<template>
    <div>
        <Title :title="title"></Title>
        <div ref="bottom2" style="width: 100%; height: 150px;"></div>
    </div>
</template>
<script>
import { DualAxes } from '@antv/g2plot';
import { get } from '@/utils/request'; // 引入请求工具

export default {
    data() {
        return {
            title: '监测月报',
            chart: null,
            // 只保留需要的指标类型
            targetTypes: ['pm25', 'pm10', 'temperature', 'humidity', 'wind_speed']
        }
    },
    methods: {
        // 从接口获取数据（仅保留目标指标）
        async fetchMonthData() {
            try {
                const response = await get('http://106.14.227.138:7001/dashboard/queryMouthData');
                
                if (response.status === 200 && Array.isArray(response.data) && response.data.length > 0) {
                    // 过滤并转换数据
                    return this.transformData(response.data);
                } else {
                    console.warn('接口数据为空，显示空图表');
                    return { primary: [], secondary: [] };
                }
            } catch (error) {
                console.error('接口请求失败:', error);
                return { primary: [], secondary: [] };
            }
        },

        // 转换数据格式（仅保留指定的5个指标）
        transformData(rawList) {
            const result = {
                primary: [], // 左侧轴：pm25、pm10（颗粒物指标）
                secondary: [] // 右侧轴：temperature、humidity、wind_speed（气象指标）
            };

            rawList.forEach(item => {
                // 只处理目标指标
                if (!this.targetTypes.includes(item.type)) return;

                const time = this.formatDate(item.date);
                const value = Number(item.value);
                const typeName = this.getTypeName(item.type);

                // 分配到对应的轴数据集
                if (['pm25', 'pm10'].includes(item.type)) {
                    result.primary.push({ time, value, type: typeName });
                } else {
                    result.secondary.push({ time, count: value, name: typeName });
                }
            });

            return result;
        },

        // 指标名称映射
        getTypeName(type) {
            const typeMap = {
                pm25: 'PM2.5(μg/m³)',
                pm10: 'PM10(μg/m³)',
                temperature: '温度(℃)',
                humidity: '湿度(%)',
                wind_speed: '风速(m/s)'
            };
            return typeMap[type];
        },

        // 格式化日期为"月-日"
        formatDate(dateStr) {
            const date = new Date(dateStr);
            return `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
        },

        // 初始化图表（仅显示5条指定曲线）
        initChart(data) {
            const container = this.$refs.bottom2;
            if (!container) return;

            // 销毁已有图表
            if (this.chart) this.chart.destroy();

            // 有数据才渲染图表
            if (data.primary.length > 0 || data.secondary.length > 0) {
                this.chart = new DualAxes(container, {
                    data: [data.primary, data.secondary],
                    xField: 'time',
                    yField: ['value', 'count'],
                    geometryOptions: [
                        // 左侧轴曲线（pm25、pm10）
                        {
                            geometry: 'line',
                            seriesField: 'type',
                            smooth: true,
                            lineStyle: { lineWidth: 2.5 },
                            point: { size: 4 },
                            color: ['#f5222d', '#fa8c16'] // 固定两种颜色
                        },
                        // 右侧轴曲线（温度、湿度、风速）
                        {
                            geometry: 'line',
                            seriesField: 'name',
                            smooth: true,
                            lineStyle: { 
                                lineWidth: 2.5,
                                lineDash: [5, 3] // 虚线区分
                            },
                            point: { 
                                size: 4,
                                shape: 'diamond'
                            },
                            color: ['#1890ff', '#52c41a', '#faad14'] // 三种不同颜色
                        }
                    ],
                    // 坐标轴配置
                    xAxis: {
                        type: 'category',
                        tickInterval: 1,
                        label: { 
                            autoRotate: true,
                            style: {
                                fill: 'white',
                                opacity: 1
                            }
                        }
                    },
                    yAxis: [
                        { 
                            name: '颗粒物浓度', 
                            min: 0,
                            nameStyle: {
                                fill: 'white',
                                opacity: 1
                            },
                            label: {
                                style: {
                                    fill: 'white',
                                    opacity: 1
                                }
                            }
                        },
                        { 
                            name: '气象指标', 
                            min: 0,
                            nameStyle: {
                                fill: 'white',
                                opacity: 1
                            },
                            label: {
                                style: {
                                    fill: 'white',
                                    opacity: 1
                                }
                            }
                        }
                    ],
                    // 图例配置
                    legend: {
                        position: 'top-right',
                        itemName: { 
                            fontSize: 12,
                            style: {
                                fill: 'white',
                                opacity: 1
                            }
                        }
                    }
                });

                this.chart.render();
            }
        }
    },
    async mounted() {
        const apiData = await this.fetchMonthData();
        this.$nextTick(() => this.initChart(apiData));
    },
    beforeDestroy() {
        if (this.chart) this.chart.destroy();
    }
}
</script>
<style scoped>
::v-deep .g2-tooltip {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    padding: 8px 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

::v-deep .g2-tooltip-item {
    margin: 3px 0;
}
</style>
    